:root,
html.dark {
  --primary-color-h: 205;
  --primary-color-s: 84%;
  --primary-color-l: 52%;

  --el-color-primary: s('hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l))');
  --el-color-primary-light-3: s('hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 5%))')
  --el-color-primary-light-5: s('hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%))')
  --el-color-primary-light-7: s('hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 15%))')
  --el-color-primary-light-8: s('hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 26%))')
  --el-color-primary-light-9: s('hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 37%))')
  --el-color-primary-dark-2: s('hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 10%))')
  --el-mask-color: $primary10
}

html.dark {
  --el-color-primary-light-9: s('hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - 70%))')
}

:root {
  --el-color-success: #4B8D6D; // Normal
  --el-color-success-light-3: #59AD85; // Hover
  --el-color-success-dark-2: #386D54; // Active
  --el-color-success-light-5: #cbddd3 // Disabled
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.3);
  --el-fill-color-light: #f4f4f4;
  --el-text-color-regular: var(--primary) !important;
  --el-border-radius-base: 6px
}

.app {
  .el-button {
    font-weight: 800
    background-color: var(--el-button-bg-color);
    --el-border-radius-base: 34px;
    font-weight: 500
    font-family: inherit
    transition: 318ms
    padding: 7px 16px
    letter-spacing: -0.28px
    transition: 150ms cubic-bezier(.42, 0, .58, 1)

    active-scale()

    &.is-link {
      background: transparent
    }

    &--large {
      --el-button-size: 43px
      font-size: 20px
      padding: 10px 20px
      font-size: 16px
      letter-spacing: -0.32px
    }

    &--action {
      height: 37px
      font-size: 14px
      font-weight: 500;
      letter-spacing: -0.28px
      border-radius: 100px
    }

    &--primary {
      --el-button-disabled-bg-color: #bbb
      --el-button-disabled-border-color: #bbb

      &:hover,
      &:focus {
        background-color: var(--el-color-primary-light-3) !important
        border-color: var(--el-color-primary-light-3) !important
        color: white !important
      }

      &:active {
        background-color: var(--el-color-primary-light-5) !important
      }

      &.is-outlined {
        background: white
        color: var(--brand) !important

        &:hover,
        &:focus {
          background: brand(10) !important
        }
      }
    }

    &--default {
      background-color: var(--primary-deep)
      color: var(--secondary) !important
      border: none;

      &:hover,
      &:focus {
        background-color: #424149 !important
        border-color: #424149 !important
      }

      &:active {
        background-color: #424149 !important
        border-color: #424149 !important
      }
    }

    &--secondary {
      color: black
      background: white
      border-color: rgba(0, 0, 0, 0.15)

      &:hover,
      &:focus {
        background-color: rgba(0,0,0,0.04) !important
        border-color: rgba(0, 0, 0, 0.15) !important
        color: black !important
      }

      &:active {
        background-color:rgba(0,0,0,0.04) !important
        border-color: rgba(0, 0, 0, 0.15) !important
      }
    }

    &.is-disabled {
      background-color: var(--el-button-disabled-bg-color) !important;
      color: var(--el-button-disabled-text-color) !important;
      border-color: var(--el-button-disabled-border-color) !important;
    }
  }

  // Modal
  .el-dialog {
    border-radius: 6px;

    &__header {
      padding: 30px 40px
      font-weight: 700;
      font-size: 18px;
    }

    &__body {
      padding-left: 40px
      padding-right: 40px
      padding-top: 0
    }

    &__footer {
      border-top: 1px solid #E0E0E0
      padding-top: 20px;
    }
  }

  .el-loading-mask {
    border-radius: 3px
    z-index: 100

    .el-loading-spinner {
      // transform: scale(0.7)

      .path {
        stroke-width: 3px
      }
    }
  }
}

.el-overlay {
  backdrop-filter: blur(1.5px);
}

.el-message {
  max-width: 90vw;
  min-width: 300px;
  border: none;
  border-radius: 20px;
  padding-top: 12px;
  padding-bottom: 16px;

  .el-message__content {
    line-height: 1.5 !important;
  }

  &--info {
    background-color: #fbfbfc;
    box-shadow: inset 0px -2px 0px #f2f2f5;
    .el-message__content {
      color: #333 !important;
    }
  }

  &--error {
    background-color: #faf8f7;
    box-shadow: inset 0px -2px 0px #f7d8d8;
  }

  &--success {
    background-color: #f7f9f7;
    box-shadow: inset 0px -2px 0px #c2e1b2;
  }
}

body
  .el-dropdown
    &__popper
      background-color: #fbfbfc;
      border-radius: 8px;
      padding: 8px;
      box-shadow: 0px 0px 12px rgba(66,65,73,.14),inset 0px 0px 0px 0.5px #e3e3e4;

      .el-popper__arrow
        display: none

    &-menu
      background-color: #fbfbfc;
      padding: 8px;

      .divider
        background-color: #e3e2e4;
        height: 1px;
        margin-bottom: 8px;
        margin-top: 8px;

      &__item
        border-radius: 4px
        padding: 5px 10px
        font-size: 15px
        font-weight: 500
        transition: all 0.3s ease 0s

        &:not(.is-disabled):hover,
        &:not(.is-disabled):focus
          background: rgba(0,0,0,.04)
          color: var(--primary)

      & + .el-dropdown-menu__item
        margin-top: 4px
